import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import './home.css';
import {Button,Icon} from 'antd';

const axios = require('axios');

// 列表：http://a.itying.com/api/producelist
// 详情：http://a.itying.com/api/producelist?id=xxx
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list: [
                {
                    _id: "1",
                    title: '精选热菜',
                    pid: '1',
                    list: [
                        {id: 1,catename: '精选热菜',img_url: '1.jpg',title: '娃娃菜炖豆腐',price: '23'},
                        {id: 2,catename: '精选热菜',img_url: '1.jpg',title: '猪肉白菜',price: '30'}
                    ]
                },
                {
                    _id: "2",
                    title: '粗粮主食',
                    pid: '2',
                    list: [
                        {id: 1,catename: '粗粮主食',img_url: '1.jpg',title: '馒头',price: '23'},
                        {id: 2,catename: '粗粮主食',img_url: '1.jpg',title: '窝窝头',price: '30'}
                    ]
                },
            ],
            domain: 'http://a.itying.com/',
        };
    }
    requestData=()=>{
        var api = this.state.domain + 'api/producelist';
        axios.get(api).then((response)=>{
            console.log(response.data.result);
            this.setState({
                list: response.data.result
            })
        }).catch(function(error){
            console.log(error);
        })
    }
    componentDidMount(){
        // this.requestData();
    }
    render() {
        return (
            <div className="home">
                <Button type="primary"><Link to="/login"><Icon type="enter" />跳转到登录页面</Link></Button>
                
                <div className="list">
                {
                    this.state.list.map((value,key)=>{
                        return(
                        <div className="item" key={key}>
                            <h3 className="item-cate">{value.title}</h3>
                            <ul className="item-list">
                                {
                                    value.list.map((v,k)=>{
                                        return (
                                            <li key={k}>
                                                <Link to={`/pcontent/${v.id}`}>
                                                    <div className="inner">
                                                        <img className="item-img" src={require('../../assets/images/1.jpg')}/>
                                                        <p className="title">{v.title}</p>
                                                        <p className="price">{v.price}</p>
                                                    </div>
                                                </Link>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </div>)
                    })
                }
                </div>
            </div>
        );
    }
}

export default Home;